<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>搜索页面</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/lib/sm.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/lib/sm-extend.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/module.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/base.css">
    <style>
        .bar:after {
            height: 0px;
        }

        .cell-left {
            margin-left: 10px !important;
        }
        .underline{
        height:1px;
        }
        .underline:after{
          content: '';
          left: 0;
          bottom: 0;
          right: auto;
          top: auto;
          height: 1px;
          width: 100%;
          background-color: #dadada;
          display: block;
          z-index: 1;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
        }
    </style>
</head>
<body>
<div class="page-group">
    <div class="page">
        <!--头部内容 !-->
        <div class="content search-content">
            <div class="searchbar flex-box">
                <div class="left"><img src="${staticpath}/front/dist/images/arrowLeft.png" alt=""
                                       class="arrow cell-left"></div>
                <input type="text" placeholder="输入关键字搜索宝贝" class="search main focus-element" autofocus="autofocus">

                <div class="right get-focus" id="searchBtn">搜索</div>
            </div>
            <div class="productList-div" style="display: none;">
                <div class="buttons-tab">
                    <a href="#" class="tab-link  button" data-url="${basepath}/rest/front/catalog/toCatalogList" id="classBtn">分类</a>
                    <a href="#sales-tab" class="tab-link sale  button active">销量</a>
                    <a href="#new-tab" class="tab-link new button">新品</a>
                    <a href="#price-tab" class="tab-link money button" data-status="0">价格<span class="priceBtn"><img
                            src="${staticpath}/front/dist/images/sort.png" class="sort" alt=""></span></a>
                </div>
                <div class="tabs">

                    <div id="sales-tab" class="tab active">
                        <ul class="o-list sales-o-list">
                        </ul>
                    </div>
                    <div id="new-tab" class="tab">
                        <ul class="o-list new-o-list">
                        </ul>
                    </div>
                    <div id="price-tab" class="tab">
                        <ul class="o-list price-o-list">
                        </ul>
                    </div>
                </div>
                <div class="lack" >
                    <img src="/resource/front/dist/images/lack_search.png" alt="" class="pic-lack" >
                    <div class="text-lack"> 亲，没有搜索到商品哦~</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/zepto.js' charset='utf-8'></script>
<script>
    $.config = {
        router: false
    }
</script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm-extend.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/product/productList.js' charset='utf-8'></script>
<script>
    (function ($) {
        $('.get-focus').addEventListener('click', function () {
            $('.focus-element').focus();
        });
    })(document.querySelector.bind(document));
    $.init();
</script>
</body>

</html>
